<template>
    <div class="webTitleAni can_not_focus" 
    :class="{'slide-from-top':isLoad===true}"   >
        <template v-for="character , index in webNameArrayUpper" :key="index">
                <div :class=webNameClass[index] :style="{animation:`${bgTextAni} 6s ease infinite`,animationDelay:index*0.06+'s'}">{{ character }}</div>
        </template>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
const bgTextAni=ref('TraverseText');

const isLoad=ref(false)

interface mapTextProp{
    coolText:string
}
const props=withDefaults(defineProps<mapTextProp>(),{
    coolText:'IMMORTALITY'
})

const webName=ref<string>(props.coolText);
const webNameArray=ref([...webName.value]);
const webNameArrayUpper=ref(webNameArray.value.map(item=>(item.toUpperCase())))
const webNameClass=ref<string[]>([]);
for(let i=0;i<webNameArrayUpper.value.length;i++){
    webNameClass.value.push('titleChar '+'char'+i.toString());
}

onMounted(()=>{
        
        setTimeout(()=>{
            isLoad.value=true;
        },500)
    })

</script>

<style>
@keyframes TraverseText{
            0%{
                color:rgba(255, 255, 255,0);
                
            }

            5%{
                color: rgba(255, 255, 255,0);
                 
            }

            6%{
                color: rgba(255, 255, 255,100);
                
            }

            12%{
                color:rgba(255, 255, 255,0);
                
            }

            70%{
                text-shadow: 0px -20px 0px rgb(255, 255, 255,0);
            }

            71%{

                text-shadow: 0px -20px 2px rgb(255, 255, 255,1);

            }
            

            75%{
                text-shadow: 0px -20px 0px rgb(255, 255, 255,0);
            }
        }
</style>

<style scoped>
.webTitleAni.slide-from-top{
    opacity: 100%;
    
}

.webTitleAni{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    transition: all 0.7s ease;
    opacity: 0%;
}

.can_not_focus{
    pointer-events: none;
    user-select: none;
}

.titleChar{
    font-size: 250%;
    margin: 5px;
    font-family: fantasy;
    color: rgba(255, 255, 255, 0);
    -webkit-text-stroke: 1px rgba(255, 255, 255,100);
    text-shadow: 0px -20px 0px rgb(255, 255, 255,0);
}
</style>